<!--
 * @Author: jackning 270580156@qq.com
 * @Date: 2024-12-28 21:09:12
 * @LastEditors: jackning 270580156@qq.com
 * @LastEditTime: 2024-12-31 15:24:18
 * @Description: bytedesk.com https://github.com/Bytedesk/bytedesk
 *   Please be aware of the BSL license restrictions before installing Bytedesk IM – 
 *  selling, reselling, or hosting Bytedesk IM as a service is a breach of the terms and automatically terminates your rights under the license. 
 *  仅支持企业内部员工自用，严禁私自用于销售、二次销售或者部署SaaS方式销售 
 *  Business Source License 1.1: https://github.com/Bytedesk/bytedesk/blob/main/LICENSE 
 *  contact: 270580156@qq.com 
 *  联系：270580156@qq.com
 * Copyright (c) 2024 by bytedesk.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ByteDesk Web Global Demo</title>
    <!-- 使用 bytedesk-web.js -->
    <script type="application/javascript" src="/dist/bytedesk-web.js"></script>
    <script>
        // 等待 DOM 加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 配置
            const config = {
                theme: {
                    textColor: '#ffffff',
                    backgroundColor: '#2e88ff',
                },
                chatConfig: {
                    org: 'df_org_uid', // 替换为您的组织ID
                    t: '2',
                    sid: 'df_rt_uid'  // 替换为您的SID
                },
                bubbleConfig: {
                    show: true,
                    icon: '👋',
                    title: 'Need help?',
                    subtitle: 'Click to chat'
                },
                marginBottom: 20,
                marginSide: 20
            };

            // 初始化
            const bytedesk = new BytedeskWeb(config);
            bytedesk.init();

            // 导出到全局以便控制按钮使用
            window.bytedesk = bytedesk;
        });
    </script>
</head>

<body>
    <div style="padding: 20px;">
        <h1>ByteDesk Web Global Demo</h1>
        <p>This demo shows how to use ByteDesk Web in global format.</p>
        
        <div style="margin: 20px 0;">
            <button onclick="window.bytedesk?.showChat()">Open Chat</button>
            <button onclick="window.bytedesk?.hideChat()">Close Chat</button>
        </div>

        <div style="margin-top: 40px;">
            <h2>Installation</h2>
            <pre><code>
// Copy this code to your page
&lt;script src="path/to/bytedesk-web.js"&gt;&lt;/script&gt;
&lt;script&gt;
  const config = {
    theme: {
        textColor: '#ffffff',
      backgroundColor: '#2e88ff',
    },
    chatConfig: {
        org: 'df_org_uid', // 替换为您的组织ID
        t: '2',
        sid: 'df_rt_uid'  // 替换为您的SID
    },
  };

  const bytedesk = new BytedeskWeb(config);
  bytedesk.init();
&lt;/script&gt;
            </code></pre>
        </div>
    </div>
</body>

</html>